<template>
  <div class="Onlinecomplaint" ref="homePage">
    <div class="bj">
      <van-nav-bar title="我的投诉" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div v-show="datalist.length == 0" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="datalist.length != 0" class="Complaint_box" @click="Complaint(itme.mbSN)" v-for="(itme,index) in datalist" :key="index">
      <div class="Complaint_scenes">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <span style="width: 23%;padding-left: 5px;">
            <van-icon name="warn-o" />投诉{{itme.ForObject}}</span>
          <span style="width: 60%;">投诉时间：{{itme.CreateDate}}</span>
          <span style="width: 15%;">{{itme.StatusStr}}</span>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
// import Swiper from 'swiper';
// import 'swiper/dist/css/swiper.min.css';
import {
  MessageBoardList
} from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', // 获取页面高度
      datalist: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.MessageBoardList()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    Complaint (mbSN) {
      this.$router.push({
        path: '/Complaint/complaintschedule',
        query: {
          mbSN: mbSN
        }
      })
    },
    MessageBoardList () {
      let data = {

      }
      MessageBoardList(data).then(res => {
        console.log(res)
        this.datalist = res.List
      })
    }
  }
}
</script>

<style lang="scss">
.Onlinecomplaint {
  background: white;

  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .Complaint_box {
    width: 100%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 400;
    font-size: 14px;

    .Complaint_scenes {
      display: flex;
      align-items: center;
      width: 100%;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      span {
        display: flex;
        align-items: center;
        height: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
